<template>
	<view>
		<tui-bottom-popup :show="show" @close="close">
			<tui-list-cell :hover="false">
				<view class="tui-pay-item__title">
					<view>请选择支付方式</view>
					<view>支付金额：<text class="tui-pay-amuont">￥20.00</text></view>
				</view>
			</tui-list-cell>
			<radio-group>
				<!-- <tui-list-cell unlined :hover="false">
					<label class="tui-pay-item">
						<image src="/static/images/mall/pay/icon_pay_balance.png" class="tui-pay-logo"></image>
						<text>余额支付（余额0，余额不足）</text>
						<view class="tui-radio" v-if="false">
							<radio color="#EB0909" name="pay"></radio>
						</view>
						<view class="tui-recharge">去充值</view>
					</label>
				</tui-list-cell> -->
				<tui-list-cell unlined>
					<label class="tui-pay-item">
						<image src="/static/images/mall/pay/icon_pay_weixin.png" class="tui-pay-logo"></image>
						<text>微信支付</text>
						<view class="tui-radio">
							<radio color="#EB0909" name="pay"  checked @tap="setWxPay()"></radio>
						</view>
					</label>
				</tui-list-cell>
				<tui-list-cell unlined>
					<label class="tui-pay-item">
						<image src="/static/images/mall/pay/icon_pay_zhifubao.png" class="tui-pay-logo"></image>
						<text>支付宝支付</text>
						<view class="tui-radio">
							<radio color="#EB0909" name="pay" @tap="setAliPay()"></radio>
						</view>
					</label>
				</tui-list-cell>
			</radio-group>
			<view class="tui-btn-pay">
				<tui-button height="88rpx" type="danger" shape="circle" shadow @click="btnPay">去付款</tui-button>
			</view>
		</tui-bottom-popup>
	</view>
</template>

<script>
	import tui from '@/common/tui.js'
	export default {
		name: 'tPayWay',
		props: {
			//控制显示
			show: {
				type: Boolean,
				default: false
			},
			page:{
				type:Number,
				default:1
			}
		},
		data() {
			return {
				choosePay:'wxpay',
				orderInfo:{}
			};
		},
		methods: {
			setWxPay(){
				this.choosePay='wxpay';
			},
			setAliPay(){
				this.choosePay='alipay';
			},
			close() {
				this.$emit("close",{})
			},
			btnPay(){
				this.close();
				console.log("获得了客户原始订单"+JSON.stringify(this.orderInfo))
				console.log("后端下单后调起前端！")
				if(this.orderInfo.pin){
					this.orderInfo.type=this.choosePay
					this.setPay(this.orderInfo)
				}else{
					tt.showToast({
					  title: "需要登陆",
					  duration: 2000,
					  success(res) {
					  },
					  fail(res) {
					  }
					});
				}
			},
			setPay(payInfo, callback) {
				let httpUrl = "/pay/pay/bytedance/per/api/pay";
				tui.tGetAction(httpUrl,payInfo).then(data1 => {
					let data=data1.data.result
					console.log("后端下单后返回的数据data:"+JSON.stringify(data))
					let payData = {
						success: function(res) {
							callback && callback({
								success: true,
								data: res
							});
							// console.log('success:' + JSON.stringify(res));
							tt.navigateTo({
									url: "../../../pages/mall/service-mall-success/service-mall-success"
							})
						},
						fail: function(err) {
							callback && callback({
								success: false,
								data: err
							});
							console.log('fail:' + JSON.stringify(err));
						}
					};
					if (payInfo.type == 'wxpay') {
						// app微信
						payData.provider = 'wxpay';
						payData.orderInfo = data;
					} else if (payInfo.type == 'alipay') {
						// app 支付宝
						payData.provider = 'alipay';
						payData.orderInfo = data;
					} else if (payInfo.type == 'baidu') {
						payData.provider = 'baidu';
						payData.orderInfo = data;
					}
					console.log("支付参数", payData);
					uni.requestPayment(payData);
				}, err => {
					callback && callback({
						success: false,
						data: err
					});
				});
			}
		}
	}
</script>

<style scoped>
	.tui-pay-item__title {
		width: 100%;
		height: 90rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 20rpx;
		box-sizing: border-box;
		font-size: 28rpx;
	}

	.tui-pay-amuont {
		color: #eb0909;
		font-weight: 500;
		font-size: 34rpx;
	}

	.tui-pay-item {
		width: 100%;
		height: 80rpx;
		display: flex;
		align-items: center;
		padding: 0 20rpx;
		box-sizing: border-box;
		font-size: 28rpx;
	}

	.tui-pay-logo {
		width: 48rpx;
		height: 48rpx;
		margin-right: 15rpx;
	}

	.tui-radio {
		margin-left: auto;
		transform: scale(0.8);
		transform-origin: 100% center;
	}

	.tui-btn-pay {
		width: 100%;
		padding: 68rpx 35rpx 50rpx 35rpx;
		box-sizing: border-box;
	}

	.tui-recharge {
		color: #fc872d;
		margin-left: auto;
		padding: 12rpx 0;
	}
</style>
